<template>
  <div>
    <!-- 头部导航 -->
    <div class="header">
      <div class="left iconfont icon-meum" @click="$router.push('/userInfo').catch(()=>{})">
      <!-- <router-link tag="div" class="left iconfont icon-meum"  > -->
        </div>
      <!-- </router-link> -->

      <router-link tag="div" class="center" to="/base/search">
        <!-- <div class="center"> -->
        <p>搜索音乐、视频、播客、歌词</p>
        <i class="iconfont icon-sousuo"></i>
        <!-- </div> -->
      </router-link>

      <div class="right iconfont icon-tinggeshiqu"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less">
.header {
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: #d44439;
  color: #fff;
  height: 39px;
  line-height: 39px;
  display: flex;
  text-align: center;
  .left,
  .right {
    flex: 0 0 40px;
    font-size: 18px;
  }
  .center {
    height: 35px;
    flex: 1;
    background-color: #fff;
    border-radius: 25px;
    overflow: hidden;
    color: #ccc;
    position: relative;
    i {
      position: absolute;
      top: 0;
      left: 20px;
    }
  }
}
</style>